<template>
    <div class="app-statistical-warp">
        <img src="http://img.uuuda.com/udaWeapp2.0/icon/yq.png" class="welcom"/>
        <div class="input-box">
            <div class="login-input-wrap">
                <img src="http://img.uuuda.com/udaWeapp2.0/icon/down/download-logo.png">
                <input type="tel" class="inputText" maxlength="11" placeholder="输入手机号" v-model="telephone" @focus="getFocus"/>
            </div>
            <div class="login-input-code">
                <input type="tel" class="inputText" maxlength="11" placeholder="输入验证码" v-model="code" @focus="getFocus"/>
                 <div v-if="telephone.length>0">

                     <div class="code-btn" v-if='reget==1' @click="sendCode">{{code_text}}</div>
                     <div class="code-btn" v-if='reget==2' style="background:rgba(211,213,222,1);">{{time}}s重新获取</div>
                     <div class="code-btn" v-if='reget==3' @click="reCode">重新获取验证码</div>
                 </div>
                <div v-else>
                    <div class="code-btn" style="background:rgba(211,213,222,1); " >{{code_text}}</div>

                </div>
            </div>
            <div class="login-input-btn" @click="initLogin" v-if="canSend">注册下载</div>
            <div class="login-input-btn" @click="initLogin" style="background:rgba(211,213,222,1); " v-else>注册下载</div>

        </div>

    </div>
</template>

<script>
let axios = require("axios");

var interval = null;
export default {
    data() {
        return {
            telephone: '',
            canSend: false,
            code: '',
            time: 60,
            code_text:"获取验证码",
            reget: 1,
            origin:'',

        };
    },

    created() {
        let self=this;
    },
    mounted(){
        let self = this;
        let query = self.$route.query;
        let origin = query.origin || '';
        self.origin=origin
        console.log("h5来源参数")
        console.log(origin)

    },

    watch:{
        //监听手机号输入
        telephone(val) {
            let self=this;
           if(val!='' && self.code!=''){
               self.canSend=true
           }
        },
        code(val) {
            let self=this;
            if(val!='' && self.telephone!=''){
                self.canSend=true
            }
        },

    },
    methods: {

        getFocus() {
            //这里用到了jq类库
            $("input,textarea").on("blur", function() {
                window.scroll(0, 0);
            });
        },

        //倒计时函数
        getCode: function (options) {
            let me = this;
            let currentTime = me.time
            me.reget= 2,//改变字体样式颜色
            interval = setInterval(function () {
                currentTime--;
                me.time=currentTime
                if (currentTime <= 0) {
                    clearInterval(interval)
                        me.time= 59,
                        // me.currentTime= 11,
                        me.reget= 3,//改变字体样式颜色
                        me.currentTime=59
                }
            }, 1000)
        },
        reCode:function () {
            let me = this;
            // me.reget= 2;
            me.sendCode();
        },
        checkInput:function(){

        },
        sendCode:function(){
            let self = this;

            axios({
                method: "POST",
                url: "/api/user/sendcode",
                params: {
                    'phone': self.telephone,
                }
            }).then(function(res) {
                let rdata = res.data;
                if(rdata.errno == 200){
                    console.log("发送验证码")
                    console.log(rdata)
                    self.getCode();

                }else {
                    self.$dialog.toast({
                        mes: res.data.msg,
                        timeout: 1500
                    });
                }
            });

        },
        initLogin:function () {
            let self = this;
            console.log(self.telephone.length)

            if (self.checkPhone(self.telephone) == false && self.telephone.length>=11){

                self.$dialog.toast({
                    mes: '手机号格式错误',
                    timeout: 1500
                });
                return
            }else if(self.code=='' ||self.telephone==''){

                self.$dialog.toast({
                    mes: '手机号验证码不能为空',
                    timeout: 1500
                });
                return

            }
            self.canSend=true


            axios({
                method: "POST",
                url: "/api/user/verifyshare",
                params: {
                    'code': self.code,
                    'phone': self.telephone,
                    'shareKey':'',
                }
            }).then(function(res) {
                let rdata = res.data;
                if(rdata.errno == 200){
                    console.log("登录")
                    console.log(rdata.msg)
                    localStorage.setItem('token',rdata.data.token);

                    self.$dialog.toast({
                        mes: res.data.msg,
                        timeout: 1500
                    });
                    setTimeout(function () {
                        self.$router.push({path:"/appDownloadStatistical",query:{origin:self.origin}});

                    },1500)

                }else {
                    self.$dialog.toast({
                        mes: res.data.msg,
                        timeout: 1500
                    });
                }
            });

        },
        checkPhone:function(str) {
            // 定义手机号的正则
            var isMobile = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
            //拿到去除空格后的手机号
            // 校验手机号
            return isMobile.test(str);
        },




    }
};
</script>

<style>
    .app-statistical-warp{
        position: relative;
        width: 100%;
        height: 100%;
        background: #9FD92B;
        padding-bottom: 24px;
    }
    .app-statistical-warp .welcom{
        position:relative;
        width:100%;
        /*height:100%;*/
        margin:0;

    }
    .app-statistical-warp .inputText{
        position: relative;
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(43,51,26,1);
        line-height:18px;
    }
    .app-statistical-warpp .input-box{
      position: relative;width:351px;
      height:236px;
      background:rgba(255,255,255,1);
      border-radius:8px;
      margin: 0 auto;
      top:-13px;
      padding: 0 24px 16px 24px;


  }
    .app-statistical-warp .login-input-wrap{
        position: relative;
        display: flex;
        align-items: center;
        top: 16px;
        /*margin-top: 16px;*/
        border-bottom: .5px solid #B1B4C4;
    }
    .app-statistical-warp .login-input-code{
        position: relative;
        display: flex;
        align-items: center;
        top: 16px;
        justify-content: space-between;
        /*margin-top: 16px;*/
        border-bottom: .5px solid #B1B4C4;
    }
    .app-statistical-warp .rule-bg{
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 16px;
    }
    .app-statistical-warp .login-input-btn{
        position: relative;
        width:319px;
        height:48px;
        background:rgba(25,121,255,1);
        border-radius:8px;
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:48px;
        text-align: center;
        margin-top: 50px;
    }
    .app-statistical-warp .login-input-wrap input{
        position: relative;
        height: 48px;
        font-size:18px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(177,183,196,1);
        line-height:18px;
        border:none;
    }
    .app-statistical-warp .login-input-code input{
        position: relative;
        height: 48px;
        font-size:18px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(177,183,196,1);
        line-height:18px;
        border:none;
    }

    .app-statistical-warp .login-input-wrap img{
        position: relative;
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
    .app-statistical-warp .code-btn{
        position: relative;
        width:76px;
        height:28px;
        text-align: center;
        background:rgba(26,121,255,1);
        border-radius:4px;
        font-size:12px;
        padding: 0;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:28px;
    }


</style>
